iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

JavaScript 新手筆記系列 第 24

Day24 - 資料儲存與更新(01)

  • 分享至 

  • xImage
  •  

前言

今天來說明將資料進行儲存的方法

localStorage

  • localStorage = 本機端儲存

    • 將資料儲存在瀏覽器,因為存在本機的電腦上,因此關閉視窗或是開多個視窗都還可以儲存
    • 跟 sessionStorage (連線時儲存)比剛好相反,關閉視窗就失效了
    • 可參考:Cookie、LocalStorage、SessionStorage 差異
  • chrome 的 檢查 (F12),選 Application (若沒有可能在 >> 內),左方的 Storage 內可以找到 Local Storage

  • localStorage.setItem(key , value);:用來儲存,前面是 Key,後面為值
  • localStorage.getItem(key);:用來呼叫,利用 Key 來將對應的值取出

index.html

<body class="body">
    <div>
        <ul class="list">
            <li>請輸入姓名:<input type="text" class="name"><input type="button" value="儲存" class="savename"></li>
            <input type="button" value="呼叫" class="callname">
            <li>我的名字是:<b id="myname"></b></li>
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

// 儲存內容至 localStorage
var elsave = document.querySelector(".savename");

function savename(e){
    var str = document.querySelector(".name").value;
    // console.log(str);
    localStorage.setItem('name', str);
}

elsave.addEventListener('click',savename);
// 從 localStorage 呼叫內容
var elcall = document.querySelector(".callname");
var myname = document.querySelector("#myname");

function callname(e){
    var str = localStorage.getItem('name');
    // console.log(str);
    myname.innerHTML = str;
};

elcall.addEventListener('click',callname);
  • 顯示結果如下,可進行儲存與呼叫

儲存物件

  • 儲存在 localStorage 裡面儲存的值皆為字串( string ),因此若要儲存陣列,需要轉換格式
  • JSON.stringify():將 JS 的物件陣列轉換成 JSON 的字串
  • JSON.parse():將 JSON 的字串轉換成 JS 的物件陣列
var data = [
    {
    Site: "崙背",
    county: "雲林縣",
    PM25: "51",
    },
    {
    Site: "富貴角",
    county: "新北市",
    PM25: "7",
    }
]

// 將陣列轉成字串後存入
var datastring = JSON.stringify(data);
// 將字串存入
localStorage.setItem('PM2.5', datastring);

// 將存入的值取出
var getdata = localStorage.getItem('PM2.5');
// 將值轉回陣列
var dataarray = JSON.parse(getdata);

console.log(dataarray[0].county);  // 顯示 雲林縣
console.log(dataarray[1].PM25);  // 顯示 7
  • 儲存後如下圖,轉換後亦可用陣列語法呼叫

次回

繼續進行儲存的部分,讓它可以新增以及刪除吧!


上一篇
Day23 - 事件(04) - BMI
下一篇
Day25 - 資料儲存與更新(02)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言